<template>

  <div class="charts" id="pta-echarts" style="height:100%;margin-left: -20px;">
  </div>

</template>

<!--中标占比-->
<script setup lang="ts">
import {
  onMounted, watch, onUnmounted, nextTick
} from "vue";

import * as echarts from 'echarts';

const props = defineProps({
  ptaData: {
    type: Object,
    required: true
  }
});

let myChart = null;

// 窗口大小变化处理函数
const handleResize = () => {
  if (myChart) {
    myChart.resize();
  }
};

const renderChart = () => {
  nextTick(() => {
    const chartDom = document.getElementById('pta-echarts');
    if (!chartDom) return;
    
    if (!myChart) {
      myChart = echarts.init(chartDom);
    }

  const option = {
    title: {
      text: `中标占比`,
      top: '16%',
      left: '8%',
      textStyle: {
        fontSize: 16,
        fontWeight: 'default',
        rich: {
          colorBlock: {
            width: 16,
            height: 16,
            backgroundColor: '#409EFF',
            borderRadius: 2,
            marginRight: 8
          }
        }
      }
    },
    tooltip: {
      show: false, // 取消所有悬浮提示文字（包括点击和hover）
      trigger: 'item'
    },

    legend: {
      orient: 'vertical', // 改为纵向布局（一行一个）
      top: '30%', // 调整顶部距离，避免与标题重叠
      left: '8%', // 居左显示
      icon: 'circle',
      itemWidth: 15,
      itemHeight: 15,
      itemGap: 15, // 增加纵向间距
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    series: [{
      type: 'pie',
      center: ['75%', '50%'], // 垂直方向距离顶部60%的位置
      radius: ['50%', '75%'],
      avoidLabelOverlap: false,
      itemStyle: {
        // 定义颜色块，使用鲜明的原型设计色彩
        color: function (params: any) {
          const colorList = ['rgba(0, 128, 255, 1)', 'rgba(243, 115, 22, 1)'];
          return colorList[params.dataIndex];
        },
        borderRadius: 3,
        borderColor: '#fff',
        borderWidth: 0
      },
      label: {
        show: true, // 显示中心文字
        position: 'center', // 固定在中心位置
        // 文字样式
        textStyle: {
          fontSize: 16,
          lineHeight: 23,
          color: '#333'
        },
        // 自定义中心文字内容（支持换行）
        formatter: (props.ptaData[0].isWinCount/(props.ptaData[0].bidCount == 0 ? 1 : props.ptaData[0].bidCount) * 100).toFixed(0)+'%\n中标率' // 这里可以替换为你需要的文字
      },
      // emphasis: {
      // 	label: {
      // 		show: true,
      // 		fontSize: 14,
      // 		fontWeight: 'bold'
      // 	}
      // },
      labelLine: {
        show: false
      },
      data: [{
        value: props.ptaData[0].bidCount,
        name: '投标次数（' + (props.ptaData[0].bidCount) + '次）'
      },
        {
          value: props.ptaData[0].isWinCount,
          name: '中标次数（'+ (props.ptaData[0].isWinCount) + '次）'
        },
      ]
    }]
  };

  myChart.setOption(option);
  });
};


// 如果 data 是异步的，监听变化
watch(() => props.ptaData, () => {
  console.log('ptaData-----------------', props.ptaData);
  renderChart();
},{ deep: true });

onMounted(() => {
  renderChart();
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 组件卸载时移除事件监听和销毁图表实例
  window.removeEventListener('resize', handleResize);
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>
